<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link
      href="https://cesium.com/downloads/cesiumjs/releases/1.96/Build/Cesium/Widgets/widgets.css"
      rel="stylesheet"
    />
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.96/Build/Cesium/Cesium.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      #my-map {
        width: 100%;
        height: 100%;
        background-color: black;
      }
    </style>
  </head>
  <body>
    <div id="my-map"></div>
    <script>
      Cesium.Ion.defaultAccessToken =
        'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3NDYzMzkyYy0xZDIzLTQyYWItOTE4OC0xMWEyNDE5MzY0MjMiLCJpZCI6MTY1MjA0LCJpYXQiOjE2OTQxMzc5NDF9.HJPrgaIb6MfQPj4WXmR_coS8SEloNJH5LIGgXDOWX6Y'
      const viewer = new Cesium.Viewer('my-map', {
        homeButton: false,
        sceneModePicker: false,
        baseLayerPicker: false, // 影像切换
        animation: true, // 是否显示动画控件
        infoBox: false, // 是否显示点击要素之后显示的信息
        selectionIndicator: false, // 要素选中框
        geocoder: false, // 是否显示地名查找控件
        timeline: true, // 是否显示时间线控件
        fullscreenButton: false,
        shouldAnimate: true,
        navigationHelpButton: false, // 是否显示帮助信息控件
        shadows: true
      })
      function createModel(url, height) {
        viewer.entities.removeAll()

        const position = Cesium.Cartesian3.fromDegrees(
          -123.0744619,
          44.0503706,
          height
        )
        const heading = Cesium.Math.toRadians(135)
        const pitch = 0
        const roll = 0
        const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll)
        const orientation = Cesium.Transforms.headingPitchRollQuaternion(
          position,
          hpr
        )

        const entity = viewer.entities.add({
          name: url,
          position: position,
          orientation: orientation,
          model: {
            uri: url,
            minimumPixelSize: 128,
            maximumScale: 20000
          }
        })
        viewer.trackedEntity = entity
      }
      createModel('./asia_building.glb', 10)
    </script>
  </body>
</html>
